<template>
  <div class="menu-wrapper">
    <template v-for="item in menu">
      <el-menu-item
        v-if="validatenull(item.children) && item.type==='1'"
        :key="item.id"
        :index="item.id"
        @click="open(item)">
        <span slot="title">{{ item.jobName}}</span>
      </el-menu-item>
      <el-menu-item
        v-else-if="validatenull(item.children) && item.type==='0'"
        :index="item.id">
        <span slot="title">{{ item.label}}</span>
      </el-menu-item>
      <el-submenu
        v-else-if="!validatenull(item.children)"
        :key="item.id"
        :index="item.id">
        <template slot="title">
          <span      class="el-menu" slot="title">{{ item.label}}</span>
        </template>
        <template v-for="(child,cindex) in item.children">
          <el-menu-item
            v-if="validatenull(child.children) && child.type==='1'"
            :key="child.id"
            :index="child.id"
            @click="open(child)">
            <span slot="title">{{ child.jobName}}</span>
          </el-menu-item>
          <el-menu-item
            v-else-if="validatenull(child.children) && child.type==='0'"
            :key="child.id"
            :index="child.id"
            @click="open(child)">
            <span slot="title">{{ child.label}}</span>
          </el-menu-item>
          <craft-menu-sidebar
            v-else
            :key="cindex"
            :menu="[child]"
            :props="props"/>
        </template>
      </el-submenu>
    </template>
  </div>
</template>
<script>
export default {
  name: 'craftMenuSidebar',
  inject: ['craftAddThis'],
  props: {
    menu: {
      type: Array,
      default: () => []
    },
    first: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: () => {
        return {}
      }
    },
    collapse: {
      type: Boolean
    }
  },
  data() {
    return {

    }
  },
  computed: {

  },
  methods: {
    open(item) {
      //调用添加工位方法
      this.craftAddThis.addCraftNode(item.jobName,item.id)
    }
  }
}
</script>

